<template>
	<view class="market_list">
		<Navbar>背包</Navbar>
		<view class="tabs">
			<view class="item" :class="active==type?'active':''" @click="changeActive()">已收藏</view>
			<view class="item" :class="active==11?'active':''" @click="changeActive(11)">出售中</view>
			<view class="item" :class="active==10?'active':''" @click="changeActive(10)">已交易</view>
		</view>
		<scroll-view scroll-y class="scroll_view">
			<view class="item" v-for="item in 99">
				<image :src="`${baseImageUrl}/test/2.png`" class="cover"></image>
				<view class="name">江湖百晓生</view>
				<view class="success" v-if="active==10">
					<view>rr#002001</view>
					<view>完成交易时间:2022304.28 20:00:00</view>
					<view>完成交易价格:￥999</view>
				</view>
				<view class="other">
					<view class="info">
						<view class="price">¥199.99</view>
						<view class="number">#548418</view>
					</view>
					<view class="btn">
						<view v-if="type==2" class="open" @click="blindboxOpen">开启</view>
						<view v-if="active==1" @click="router('/pages/market/sell')">出售</view>
						<view v-else-if="active==11" class="cancel" @click="popup_show=true">取消出售</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="popup_show" bgColor="transparent" mode="center" @close="close">
			<CancelSell @close="close" @confirm="popup=2" v-if="popup==1" />
			<OpenResult @close="close" v-else />
		</u-popup>
	</view>
</template>

<script>
	import {
		orderLists,
		productMy
	} from '@/request/api.js';
	import CancelSell from '@/components/market/CancelSell.vue';
	import OpenResult from '@/components/market/OpenResult.vue';

	export default {
		components: {
			CancelSell,
			OpenResult
		},
		data() {
			return {
				type: null,
				active: 1,

				popup_show: false,
				popup: 1
			}
		},
		async onLoad(option) {
			this.type = option.type;
		},
		methods: {
			async getCollectionList() {
				let {
					orders
				} = await productMy({
					type: this.active
				});
				this.list = orders;
			},
			changeActive(value) {
				this.active = value ? value : this.type;
				this.list = [];
				this.page = 1;
				value ? this.getCollectionList() : this.getOrderLists();
				// this.active == this.type ? this.getCollectionList() : this.getOrderLists();
			},
			open(index) {
				this.popup = index;
				this.popup_show = true;
			},
			close() {
				this.show = false;
				this.popup_show = false;
			},
			blindboxOpen() {
				this.open(2)
			}
		}
	}
</script>

<style scoped lang="scss">
	.market_list {
		height: 100vh;
		background: #29170D;
		overflow: hidden;

		.tabs {
			width: 710rpx;
			height: 100rpx;
			margin: 0 auto;
			padding: 0 15rpx;
			box-sizing: border-box;
			background-color: rgba(31, 11, 5, 0.6);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 400;
				font-family: LiSu;

				&.active {
					color: #494338;
					background: url(#{$baseImageUrl}/common/active.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.scroll_view {
			height: calc(100vh - #{$navbarHeight} - 100rpx);
			padding: 30rpx;
			box-sizing: border-box;

			.item {
				width: 100%;
				height: 934rpx;
				margin-bottom: 30rpx;
				padding: 30rpx 30rpx 44rpx;
				box-sizing: border-box;
				background: url(#{$baseImageUrl}/market/688_934.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.cover {
					width: 100%;
					height: 626rpx;
				}

				.name {
					height: 90rpx;
					line-height: 90rpx;
					color: #494338;
					font-size: 50rpx;
					font-weight: 400;
					font-family: LiSu;
				}

				.success {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					view {
						color: #494338;
						font-size: 28rpx;
						font-weight: 400;
						font-family: SimSun;
					}
				}

				.other {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.info {
						color: #494338;
						font-size: 28rpx;
						font-weight: 400;
						font-family: SimSun;
						display: flex;
						justify-content: space-between;
					}

					.btn {
						display: flex;
						justify-content: center;

						view {
							width: 204rpx;
							height: 70rpx;
							line-height: 70rpx;
							text-align: center;
							color: #FFFFFF;
							font-size: 30rpx;
							font-weight: 400;
							font-family: SimSun;
							margin: 0 36rpx;
							background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
							background-size: 100% 100%;

							&.cancel {
								background: url(#{$baseImageUrl}/common/btn2.png) no-repeat;
								background-size: 100% 100%;
							}

							&.open {
								background: url(#{$baseImageUrl}/common/btn3.png) no-repeat;
								background-size: 100% 100%;
							}
						}
					}
				}

				// .box {
				// 	flex: 1;
				// }
			}
		}
	}
</style>